<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>图形显示鼠标点击位置</title>
		<style>
			#circle {
				width: 50px;
				height: 50px;
				background: orange;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div id="circle"></div>
		<script>
			var circle = document.getElementById('circle');
			document.onmouseover = function() {	
				var x = event.pageX;
				var y = event.pageY;
				x = x - circle.offsetWidth * 1.5;
				y = y + circle.offsetWidth / 2;
				circle.style.left = x + 'px';
				circle.style.top = y + 'px';

			}
		</script>
	</body>

</html>